<script>
    import '@shoelace-style/shoelace/dist/components/button/button.js';
    import '@shoelace-style/shoelace/dist/components/menu/menu.js';
    import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
    import '@shoelace-style/shoelace/dist/components/divider/divider.js';
    import {isTheme} from "$lib/stores/globalControl.svelte.js";
    import Users from '$lib/components/public/Users.svelte';
    import {localInfo} from "$lib/stores/Storage.svelte.js";

    //修改皮肤颜色
    function changeTheme(){
        isTheme.set(!$isTheme);

        let link = document.querySelector("#theme");
        if($isTheme){//白天
            link.setAttribute("href","/node_modules/@shoelace-style/shoelace/dist/themes/light.css");
        }else{//黑夜
            link.setAttribute("href","/node_modules/@shoelace-style/shoelace/dist/themes/dark.css");
        }
    }
</script>

<nav>
    <!-- 主题色 -->
    <div class="theme">
        <sl-button variant="text" size="large" onclick={changeTheme}>
            <sl-icon name="{$isTheme ? 'brightness-high' : 'moon-stars'}" slot="prefix"></sl-icon>
            {$isTheme ? '日间模式' : '夜间模式'}
        </sl-button>
    </div>

    <div class="navbar-container">

        <div class="userlocal">{$localInfo[0]?.email}</div>


        <!-- 右侧导航菜单 -->
        <div class="nav-menu">
            <Users></Users>
        </div>
    </div>
</nav>

<sl-divider style="--color: tomato;"></sl-divider>

<style>
    nav {
        height: 60%;
        width : 100%;
    }

    .navbar-container {
        height : 100%;
        display : flex;
        flex-direction : row;
        justify-content:  right;
        align-items : flex-end;
        gap : 15px;
        padding-right: 2rem;
    }

    .theme sl-button {
        font-size: 1.25rem;
        font-weight: 500;
    }

    .theme{
        height: 100%;
        float: left;
        display: flex;
        align-items: center;
    }

    .nav-menu {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .userlocal{
        height: 100%;
        display: flex;
        align-items: center;
        color : tomato;

    }
</style>